<template>
  <div :loading="loading">
    <el-form label-width="8rem" ref="inForm" :model="inData" :rules="rule">
      <el-form-item label="姓名" prop="RY_name">
        <el-input v-model="inData.RY_name" @blur="nameBlur(inData.RY_name)"></el-input>
      </el-form-item>
      <el-form-item label="入住时间" prop="live_date">
        <el-date-picker
          v-model="inData.live_date"
          align="right"
          type="date"
          placeholder="选择日期"
          :picker-options="pickerOptions"
        ></el-date-picker>
      </el-form-item>
      <el-form-item label="身份证号码" prop="SQ_RY_idcardnum">
        <el-input v-model="inData.SQ_RY_idcardnum" :disabled="personDisabled"></el-input>
      </el-form-item>
      <!-- <el-form-item label="身份证号码" prop="SQ_RY_idcardnum">
        <el-select
          v-model="inData.SQ_RY_idcardnum"
          placeholder="请选择"
          @blur="idBlur(inData.SQ_RY_idcardnum)"
        >
          <el-option
            v-for="item in SQ_RY_idcardnum"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-form-item>-->
      <el-form-item label="籍贯">
        <el-input v-model="inData.SQ_RY_location" :disabled="personDisabled"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="RY_sex">
        <el-radio-group v-model="inData.RY_sex" :disabled="personDisabled">
          <el-radio label="0">女</el-radio>
          <el-radio label="1">男</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="工号">
        <el-input v-model="inData.RY_degsonid" :disabled="personDisabled"></el-input>
      </el-form-item>
      <el-form-item label="部门">
        <el-input v-model="inData.RY_department" :disabled="personDisabled"></el-input>
      </el-form-item>
      <el-form-item label="岗位">
        <el-input v-model="inData.RY_job" :disabled="personDisabled"></el-input>
      </el-form-item>

      <el-form-item label="联系电话" prop="RY_phone">
        <el-input v-model="inData.RY_phone" :disabled="personDisabled"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input v-model="inData.RY_remarks" type="textarea" autosize placeholder="请输入内容"></el-input>
      </el-form-item>
      <!-- <el-form-item label="是否临时入住" prop="SS_temporary">
        <el-radio v-model="inData.SS_temporary" label="1">临时入住</el-radio>
        <el-radio v-model="inData.SS_temporary" label="0">非临时入住</el-radio>
      </el-form-item>-->
      <el-row>
        <el-col :md="4" :lg="6" :xl="4">
          <el-form-item label="入住区域" prop="AR_number">
            <el-select
              v-model="inData.AR_number"
              placeholder="请选择区域"
              @change="areaChange(inData.AR_number)"
            >
              <el-option
                v-for="item in area"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="4" :lg="7" :xl="4">
          <el-form-item label="入住宿舍楼" prop="SSL_number">
            <el-select
              v-model="inData.SSL_number"
              placeholder="请选择宿舍楼"
              @change="dormChange(inData.SSL_number)"
            >
              <el-option
                v-for="item in dorm"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="4" :lg="6" :xl="4">
          <el-form-item label="入住楼层" prop="SS_floor">
            <el-select
              v-model="inData.SS_floor"
              placeholder="请选择楼层"
              @change="floorChange(inData.floor)"
            >
              <el-option
                v-for="item in floor"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="4" :lg="6" :xl="4">
          <el-form-item label="入住房间" prop="SS_number">
            <el-select
              v-model="inData.SS_number"
              placeholder="请选择房间"
              @change="roomChange(inData.SS_number)"
            >
              <el-option
                v-for="item in room"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.usable }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :md="4" :lg="6" :xl="4">
          <el-form-item label="入住床位" prop="RY_bed">
            <el-select v-model="inData.RY_bed" placeholder="请选择床位">
              <el-option
                v-for="item in bed"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.person }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :md="4" :lg="6" :xl="4">
          <el-form-item label="柜子">
            <el-select v-model="inData._cupboard" placeholder="请选择柜子">
              <el-option
                v-for="item in cupboard"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                :disabled="item.disabled"
              >
                <span style="float: left">{{ item.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.person }}</span>
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
      </el-row>
      <!-- <el-form-item label="领用物品">
        <el-transfer v-model="goods" :data="data" :titles="['可领用','已领用']"></el-transfer>
      </el-form-item>-->
      <el-form-item>
        <el-button type="primary" @click.native="resettingSubmit('inForm')">重置</el-button>
        <el-button @click.native="inSubmit('inForm')">提交</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import {
  check_in_people_select,
  check_in_admin,
  check_condition_number,
  check_condition_bed_table,
} from "../../api/checkin";
import { area_select } from "../../api/area.js";
import { building_select } from "../../api/floor.js";
import { receiving_items_select } from "../../api/usegoods.js";
export default {
  data() {
    return {
      data: [],
      goods: [],
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      inData: {
        SQ_RY_number: null,
        SQ_RY_idcardnum: null,
        SQ_RY_location: null,
        RY_sex: null,
        SS_floor: null,
        AR_number: null,
        SSL_number: null,
        RY_name: "",
        AR_number: "",
        live_date: "",
        SQ_sex: "",
        RY_degsonid: "",
        RY_department: "",
        RY_job: "",
        RY_phone: "",
        RY_remarks: null,
        SS_number: "",
        RY_bed: "",
        // _cupboard: "",
        SS_temporary: "",
        // sort: "0",
      },
      loading: false,
      // sfzDisabled: true,
      personDisabled: true,
      area: [],
      dorm: [],
      floor: [],
      room: [],
      bed: [],
      cupboard: [],
      rule: {
        RY_name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        live_date: [
          { required: true, message: "请选择入住时间", trigger: "change" },
        ],
        // SQ_RY_idcardnum: [
        //   { required: true, message: "请输入身份证号", trigger: "change" },
        // ],
        RY_phone: [
          { required: true, message: "请输入联系电话", trigger: "change" },
        ],
        AR_number: [
          { required: true, message: "请选择入住区域", trigger: "change" },
        ],
        SSL_number: [
          { required: true, message: "请选择入住宿舍楼", trigger: "change" },
        ],
        SS_floor: [
          { required: true, message: "请选择入住楼层", trigger: "change" },
        ],
        SS_number: [
          { required: true, message: "请选择入住房间", trigger: "change" },
        ],
        RY_bed: [
          { required: true, message: "请选择入住床位", trigger: "change" },
        ],
        RY_sex: [
          { required: true, message: "请选择入住人性别", trigger: "blur" },
        ],
      },
      personDisabled: true,
      costVisible: false,
      meterForm: {
        coldMeter: 0,
        hotMeter: 0,
        electricMeter: 0,
      },
    };
  },
  methods: {
    // 取消操作
    resettingSubmit(formName) {
      this.$refs[formName].resetFields();
      this.goods = [];
      this.area = [];
      this.dorm = [];
      this.floor = [];
      this.room = [];
      this.bed = [];
    },
    nameBlur(RY_name) {
      // 获取身份证以及性别
      if (this.inData.RY_name === "") {
      }
      this.loading = true;
      check_in_people_select({
        RY_name: this.inData.RY_name,
        RY_idcardnum: this.inData.SQ_RY_idcardnum,
        limit: 1,
      }).then((res) => {
        this.loading = false;
        if (res) {
          // console.log(1);
          //查询到数据，则直接赋值
          this.inData.RY_name = res.data[0].SQ_RY_name;
          this.inData.SQ_RY_idcardnum = res.data[0].SQ_RY_idcardnum;
          this.inData.SQ_RY_location = res.data[0].SQ_RY_address;
          this.inData.RY_sex = res.data[0].SQ_RY_sex;
          this.inData.RY_department = res.data[0].SQ_RY_department;
          this.inData.RY_job = res.data[0].SQ_RY_job;
          this.inData.RY_phone = res.data[0].SQ_RY_phone;
        } else {
          // console.log(2);
          //新一次查询未查询到值，则把前一次查询的数据清除
          // this.inData.SQ_RY_idcardnum = "";
          // this.inData.SQ_RY_location = "";
          // this.inData.RY_sex = "";
          // this.inData.RY_department = "";
          // this.inData.RY_job = "";
          // this.inData.RY_phone = "";
          // this.$confirm("此员工尚未扫描二维码录入信息,是否手工录入?", "提示", {
          //   confirmButtonText: "确定",
          //   cancelButtonText: "取消",
          //   type: "warning",
          // })
          //   .then(() => {
          //     this.personDisabled = false;
          //     // this.inData.SQ_RY_idcardnum = "";
          //     // this.inData.SQ_RY_location = "";
          //     // this.inData.RY_sex = "";
          //   })
          //   .catch(() => {
          //     this.$message({
          //       type: "info",
          //       message: "已取消操作",
          //     });
          //   });
          alert("该人员未登记信息，请登记相关信息后再办理入住");
          this.inData.RY_name = "";
          this.inData.SQ_RY_idcardnum = "";
          this.inData.SQ_RY_location = "";
          this.inData.RY_sex = "";
          this.inData.RY_department = "";
          this.inData.RY_job = "";
          this.inData.RY_phone = "";
        }
      });
    },
    // IdBlur(SQ_RY_idcardnum) {
    //   check_in_people_select
    // },
    getArea() {
      area_select({ AR_number: "", AR_name: "", page: 1 }).then((res) => {
        if (res) {
          for (let index = 0; index < res.data.length; index++) {
            this.area.push({
              label: res.data[index].AR_name,
              value: res.data[index].AR_number,
            });
          }
        }
      });
    },
    //获取区域对应宿舍楼
    areaChange() {
      if (this.inData.AR_number === "") {
        return true;
      }
      building_select({
        AR_number: this.inData.AR_number,
        SSL_number: "",
        SSL_admin: "",
        page: 1,
      }).then((res) => {
        if (res) {
          this.dorm = [];
          for (let index = 0; index < res.data.length; index++) {
            this.dorm.push({
              label: res.data[index].SSL_name,
              value: res.data[index].SSL_number,
            });
          }
        } else {
          this.dorm = [
            {
              value: "",
              label: "",
            },
          ];
          this.inData._dorm = "";
        }
      });
    },
    //获取宿舍楼对应最多楼层
    dormChange(dorm) {
      if (dorm === "") {
        return true;
      }
      // 获取当前楼层
      building_select({
        AR_number: this.inData.AR_number,
        SSL_number: this.inData.SSL_number,
        SSL_admin: "",
        page: 1,
      }).then((res) => {
        if (res) {
          this.floor = []; //每次选择楼层号都清除上一次已填入floor的信息
          let maxfloor = res.data[0].SSL_floor;
          for (let i = 1; i <= maxfloor; i++) {
            this.floor.push({
              label: i,
              value: i,
            });
          }
        }
      });
      //取领用物品
      // receiving_items_select({
      //   AR_number: this.inData.AR_number,
      //   SSL_number: this.inData.SSL_number,
      //   RE_number: "",
      //   RE_name: "",
      //   limit: 1,
      // }).then((res) => {
      //   if (res) {
      //     for (let i = 0; i < res.data.length; i++) {
      //       this.data.push({
      //         key: res.data[i].RE_number,
      //         label: res.data[i].RE_name,
      //         disabled: false,
      //       });
      //       this.goods.push("");
      //     }
      //   }
      // });
    },
    //获取空房间
    floorChange() {
      // if (this.inData.AR_number === "") {
      //   return true;
      // }
      check_condition_number({
        AR_number: this.inData.AR_number,
        SSL_number: this.inData.SSL_number,
        SS_floor: this.inData.SS_floor,
      }).then((res) => {
        if (res) {
          // console.log(res.SS_number);
          this.room = [];
          for (let index = 0; index < res.SS_number.length; index++) {
            this.room.push({
              label: res.SS_number[index].SS_number,
              value: res.SS_number[index].SS_number,
            });
          }
        } else {
          this.room = [
            {
              value: "",
              label: "",
            },
          ];
          this.inData.room = "";
        }
      });
    },
    //获取空床位
    roomChange() {
      check_condition_bed_table({
        AR_number: this.inData.AR_number,
        SSL_number: this.inData.SSL_number,
        SS_floor: this.inData.SS_floor,
        SS_number: this.inData.SS_number,
      }).then((res) => {
        if (res) {
          // console.log(res.RY_bed);
          this.bed = [];
          for (let index = 0; index < res.RY_bed.length; index++) {
            this.bed.push({
              label: res.RY_bed[index].RY_bed,
              value: res.RY_bed[index].RY_bed,
            });
          }
        } else {
          this.bed = [
            {
              value: "",
              label: "",
            },
          ];
          this.inData.bed = "";
        }
      });
    },

    // 提交
    inSubmit(forName) {
      this.$refs[forName].validate((valid) => {
        if (valid) {
          //转换日期输出格式
          var chinaStandard = this.inData.live_date;
          var date = new Date(chinaStandard);
          var y = date.getFullYear();
          var m = date.getMonth() + 1;
          m = m < 10 ? "0" + m : m;
          var d = date.getDate();
          d = d < 10 ? "0" + d : d;
          let time = y + "-" + m + "-" + d;

          check_in_admin({
            RY_name: this.inData.RY_name,
            RY_idcardnum: this.inData.SQ_RY_idcardnum,
            live_date: time,
            RY_sex: this.inData.RY_sex,
            AR_number: this.inData.AR_number,
            SSL_number: this.inData.SSL_number,
            SS_floor: this.inData.SS_floor,
            SS_number: this.inData.SS_number,
            RY_bed: this.inData.RY_bed,
            RY_degsonid: this.inData.RY_degsonid,
            RY_phone: this.inData.RY_phone,
            RY_remarks: this.inData.RY_remarks,
            RY_address: "",
            RY_location: "",
            RY_emergency_contact: "",
            RY_relationship: "",
            RY_emergency_phone: "",
            RY_reason: "",
          }).then((res) => {
            if (res) {
              // 提示入住成功
              this.$alert("入住成功", "系统提示", {
                confirmButtonText: "确定",
                callback: (action) => {
                  console.log("成功");
                },
              });
            }
          });
        }
      });
    },
  },
  mounted() {
    this.getArea();
  },
};
</script>